<template>
  <el-dialog
    title="工作交接日志"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    :width="device == 'desktop' ? '1050px' : '90%'"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @open="handleOpen"
  >
    <el-collapse :value="activeCollapse">
      <el-collapse-item v-for="(itemForm, i) in logForms" :key="i" :name="i">
        <div slot="title" class="top">
          <PartitionTitle :title="itemForm.dateTime" type="line">
          </PartitionTitle>
          <div class="top-right">
            <span>工位</span>
            <el-input
              type="text"
              v-model="workStationName"
              size="small"
              disabled
            ></el-input>
          </div>
        </div>
        <el-form :model="itemForm" label-width="100px" size="small">
          <el-row>
            <el-col :span="5">
              <el-form-item label="班组" label-width="60px">
                <el-input
                  type="text"
                  v-model="groupName"
                  :disabled="readonly"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="班次" label-width="60px">
                <el-input
                  type="text"
                  v-model="classesName"
                  :disabled="readonly"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item
                label="填写人"
                prop="reportUserRealname"
                label-width="75px"
              >
                <el-input
                  type="text"
                  v-model="itemForm.reportUserRealname"
                  :disabled="readonly"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="工作时间" label-width="90px">
                <el-input
                  type="text"
                  v-model="classesTime"
                  :disabled="readonly"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="工艺参数调整" prop="processParamAdjust">
                <el-input
                  type="textarea"
                  v-model="itemForm.processParamAdjust"
                  :readonly="readonly"
                  :autosize="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="设备运行情况" prop="equipmentOperationDes">
                <el-input
                  type="textarea"
                  v-model="itemForm.equipmentOperationDes"
                  :readonly="readonly"
                  :autosize="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="卫生清洁工作" prop="hygieneCleanDes">
                <el-input
                  type="textarea"
                  v-model="itemForm.hygieneCleanDes"
                  :readonly="readonly"
                  :autosize="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="安全" prop="secureDes">
                <el-input
                  type="textarea"
                  v-model="itemForm.secureDes"
                  :readonly="readonly"
                  :autosize="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="质量" prop="qualityDes">
                <el-input
                  type="textarea"
                  v-model="itemForm.qualityDes"
                  :readonly="readonly"
                  :autosize="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="notes">
                <el-input
                  type="textarea"
                  v-model="itemForm.notes"
                  :readonly="readonly"
                  :autosize="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    currentStation: {
      type: Object,
      default: null,
    },
    detailKey: {
      type: String,
      default: "handoverDetail",
    },
    // 是否只读;只读时,有查询条件,可跨条件查询;编辑状态则只有当前工位编辑
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      logForms: [],
      options: [],
    };
  },
  computed: {
    ...mapGetters(["device"]),
    ...mapState({
      handoverDetail: (state) => state.turnOnDuty.handoverDetail,
    }),
    detailsData() {
      return this[this.detailKey];
    },
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
    activeCollapse() {
      if (this.logForms?.length) {
        return this.logForms.map((ele,i) => i);
      }
      return [];
    },
    // 工位
    workStationName() {
      if (this.currentStation?.workStationDto) {
        return this.currentStation.workStationDto.workStationName;
      }
      return "";
    },
    // 班组
    groupName() {
      if (this.detailsData) {
        return this.detailsData.groupName;
      }
      return "";
    },
    // 班次
    classesName() {
      if (this.detailsData) {
        return this.detailsData.classesName;
      }
      return "";
    },
    // 工作时间
    classesTime() {
      if (this.detailsData) {
        return (
          this.detailsData.classesStartTime +
          "~" +
          this.detailsData.classesEndTime
        );
      }
      return "";
    },
  },
  methods: {
    handleOpen() {
      this.logForms = this.currentStation?.workLogDtos || [];
    },
  },
};
</script>
<style lang="scss" scoped>
.block-title {
  margin-bottom: 0;
}
.top {
  display: flex;
  justify-content: flex-start;
}
.top-right {
  display: flex;
  & > span:first-child {
    white-space: nowrap;
    margin-right: 10px;
    margin-left: 10px;
  }
}
::v-deep .el-collapse {
  border: none;
  .el-collapse-item__wrap {
    border: none;
    margin-top: 10px;
  }
}
</style>
